<template>
	<div class="course-detail-container" v-loading="loading">
		<!-- 头部 -->
		<el-card class="mb-6">
			<div class="header-content">
				<h3 class="course-title">{{ courseData.title }}</h3>
				<div class="action-buttons">
					<el-button type="primary" :icon="Edit" @click="handleEdit">
						编辑课程
					</el-button>
					<el-button :icon="Switch" @click="handleOffline">
						下架课程
					</el-button>
				</div>
			</div>

			<el-card shadow="never" class="mt-4">
				<div class="enrollment-info">
					<div class="info-item">
						<span class="info-label">报名人数</span>
						<span class="info-value">{{ courseData.enrolledCount }}</span>
					</div>
					<div class="info-item">
						<span class="info-label">限额人数</span>
						<span class="info-value">
							{{ courseData.peopleLimit === -1 ? '不限' : courseData.peopleLimit }}
						</span>
					</div>
				</div>
			</el-card>
		</el-card>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Left Content (8 columns) -->
			<div class="left-content">
				<!-- 图片区 -->
				<el-card>
					<div class="main-image">
						<el-image v-if="mainImageUrl" :src="mainImageUrl" fit="cover" class="image-preview" />
						<el-empty v-else description="暂无课程图片" :image-size="100" />
					</div>
					<div class="thumbnail-list">
						<el-image v-for="(image, index) in courseData.courseImages" :key="image.id"
							:src="image.imageUrl" fit="cover" class="thumbnail" @click="changeMainImage(index)" />
					</div>
				</el-card>

				<!-- 课程信息 -->
				<el-card class="mt-6">
					<template #header>
						<div class="card-header">
							<span>课程信息</span>
						</div>
					</template>

					<div class="course-info">
						<div class="info-row">
							<div class="info-col">
								<span class="info-label">课程 ID</span>
								<span class="info-value">{{ courseData.id }}</span>
							</div>
							<div class="info-col">
								<span class="info-label">课程费用</span>
								<span class="info-value price">¥{{ formattedFee }}</span>
							</div>
						</div>

						<div class="info-row">
							<div class="info-col">
								<span class="info-label">开课时间</span>
								<span class="info-value">{{ courseData.startTime }}</span>
							</div>
						</div>

						<div class="info-row">
							<div class="info-col">
								<span class="info-label">课程描述</span>
								<p class="info-description">{{ courseData.description }}</p>
							</div>
						</div>
					</div>
				</el-card>
			</div>

			<!-- 系统信息 -->
			<div class="right-sidebar">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>系统信息</span>
						</div>
					</template>

					<div class="system-info">
						<div class="info-item">
							<span class="info-label">创建时间</span>
							<span class="info-value">{{ courseData.createdAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">更新时间</span>
							<span class="info-value">{{ courseData.updatedAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">状态</span>
							<el-tag :type="statusTagType" size="small">
								{{ statusText }}
							</el-tag>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CourseDetailView'
	};
</script>

<script setup>
	import {
		getCourseDetail
	} from '@/api/course.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Edit,
		Switch
	} from '@element-plus/icons-vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	const route = useRoute()
	const router =useRouter()
	const loading = ref(false)
	const courseId = ref(route.params.id) // 获取路由参数中的 id
	const courseData = ref({})
	const mainImageUrl = ref('')

	/**
	 * 计算格式化后的费用
	 */
	const formattedFee = computed(() => {
		return courseData.value.fee ? courseData.value.fee.toFixed(2) : '0.00'
	})
	
	/**
	 * 获取课程详情
	 */
	const fetchCourseData = async () => {
		loading.value = true
		try {
			const res = await getCourseDetail(courseId.value)
			// 确保数据存在
			if (res.data) {
				courseData.value = res.data

				// 处理图片 - 取第一个图片的URL
				if (res.data.courseImages?.length > 0) {
					mainImageUrl.value = res.data.courseImages[0].imageUrl
				} else {
					mainImageUrl.value = new URL('../../assets/noImage.png', import.meta.url).href // 或者设置一个默认图片
				}
			}
		} catch (error) {
			ElMessage.error('获取课程详情失败')
		} finally {
			loading.value = false
		}
	}

	// 获取课程数据
	onMounted(() => {
		const response = fetchCourseData()
		if (response.code === 200) {
			courseData.value = response.data
			// 设置主图
			if (response.data.courseImages && response.data.courseImages.length > 0) {
				mainImageUrl.value = response.data.courseImages[0].imageUrl
			}
		}
	})

	// 状态标签类型和文本
	const statusTagType = computed(() => {
		return courseData.value.status === 1 ? 'success' : 'info'
	})

	const statusText = computed(() => {
		return courseData.value.status === 1 ? '进行中' : '已下架'
	})

	// 切换主图
	const changeMainImage = (index) => {
		if (courseData.value.courseImages && courseData.value.courseImages[index]) {
			mainImageUrl.value = courseData.value.courseImages[index].imageUrl
		}
	}

	// 处理编辑
	const handleEdit = () => {
		console.log('编辑课程')
		router.push(`/course/edit/${courseId.value}`)
	}

	// 处理下架
	const handleOffline = () => {
		console.log('下架课程')
	}
</script>

<style scoped>
	.course-detail-container {
		display: flex;
		flex-direction: column;
		/* 继承父容器高度 */
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.course-title {
		font-size: 20px;
		font-weight: 600;
		color: #303133;
		margin: 0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.enrollment-info {
		display: flex;
		gap: 24px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 14px;
		color: #909399;
	}

	.info-value {
		font-size: 24px;
		font-weight: 600;
		color: #303133;
	}

	.price {
		color: #409eff;
	}

	.main-content {
		flex: 1;
		display: flex;
		gap: 20px;
		min-height: 0;
		
	}

	.left-content {
		flex: 2;
		min-width: 0;
	}

	.right-sidebar {
		flex: 1;
		position: relative;
		max-height: calc(100vh - 200px);
		/* overflow-y: auto; */
		padding-right: 20px;
	}

	.main-image {
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f7fa;
		border-radius: 4px;
		overflow: hidden;
	}

	.image-preview {
		width: 100%;
		height: 100%;
	}

	.thumbnail-list {
		display: flex;
		gap: 8px;
		padding: 12px 0;
	}

	.thumbnail {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		cursor: pointer;
		border: 1px solid #ebeef5;
		transition: all 0.3s;
	}

	.thumbnail:hover {
		border-color: #409eff;
		transform: translateY(-2px);
	}

	.card-header {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.course-info {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.info-row {
		display: flex;
		gap: 16px;
	}

	.info-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.info-description {
		margin: 0;
		font-size: 14px;
		color: #606266;
		line-height: 1.6;
	}

	.system-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.mt-6 {
		margin-top: 24px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}


</style>